import React from 'react'
import axios from 'axios'
import {Table, Modal, message, Card, Row, Col, Button, Select, Input, Menu, Dropdown} from 'antd'
import {EditOutlined, PlusOutlined} from '@ant-design/icons';

const InputSearch = Input.Search;
const Option = Select.Option;
export default class Student extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            key: 'name',
            q: '',

            list: [],
            pagination: {
                pageSize: 5,
                current: 1,
                total: 0,
            },
            loading: false
        }
    }

    loadData = () => {
        this.setState({
            loading: true
        });
        axios.post("student/findAll")
            .then((result) => {
                this.setState({
                    list: result.data.result,
                    loading: false
                })
            })
    };

    componentDidMount() {
        this.loadData();
    }

    //分页跳进发生变化时，重新加载数据
    handleTableChange = (pagination) => {
        this.setState({
            pagination,
        }, () => this.loadData());
    };

    remove = (id, index) => {
        Modal.confirm({
            title: `确认删除操作?`,
            onOk: () => {
                axios.delete('student/delStuById', {
                    id: id
                }).then(() => {
                    message.success('删除成功');
                    let {list = []} = this.state;
                    this.setState({
                        list: list.splice(index, 1)
                    })
                })
            },
            onCancel() {
            },
        });
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({selectedRowKeys});
    };

    render() {
        let {pagination = {}, list = [], loading, q} = this.state;

        return (
            <div className="common-list">
                <Card>
                    <Row>
                        <Col span={12}>
                            <Button type="primary" icon={<PlusOutlined/>} onClick={() => {
                                message.success('添加成功')
                            }}>添加</Button>
                        </Col>

                        <Col span={12} style={{textAlign: 'right'}}>
                            <Select onSelect={(key) => {
                                this.setState({key}, () => {
                                    this.loadData()
                                });
                            }} defaultValue={0} style={{width: 100}}>
                                <Option value={0}>0</Option>
                                <Option value={1}>1</Option>
                                <Option value={2}>2</Option>
                            </Select>

                            &nbsp;
                            <InputSearch
                                placeholder="输入内容查询"
                                style={{width: 200}}
                                value={q}
                                onChange={(e) => {
                                    this.setState({q: e.target.value});
                                }}
                                onSearch={(v) => {
                                    this.setState({
                                        q: v, pagination: {
                                            ...pagination,
                                            current: 1
                                        }
                                    }, () => {
                                        this.loadData()
                                    });
                                }}/>
                        </Col>
                    </Row>
                    <Table
                        columns={[
                            {
                                title: 'id',
                                dataIndex: 'sid',
                                key: 'sid',
                                className: 'txt-center'
                            },
                            {
                                title: '名字',
                                dataIndex: 'name',
                                className: 'txt-center'
                            },
                            {
                                title: '年龄',
                                dataIndex: 'age',
                                className: 'txt-center'
                            },
                            {
                                title: '性别',
                                dataIndex: 'gender',
                                className: 'txt-center',
                                render: (gender) => {
                                    return <div className="state">
                                        {gender === 1 ? <span>男</span> : <span className="warning">女</span>}</div>
                                }
                            },
                            {
                                title: '地址',
                                dataIndex: 'address',
                                className: 'txt-center'
                            },
                            {
                                title: '操作',
                                dataIndex: 'option',
                                className: 'txt-center',
                                render: (obj, stu, index) => {
                                    let {id} = stu;
                                    return <Dropdown overlay={<Menu>
                                        <Menu.Item key="1">
                                            <a onClick={() => this.edit(id)}>编辑</a>
                                        </Menu.Item>
                                        <Menu.Item key="2">
                                            <a onClick={() => this.remove(id, index)}>删除</a>
                                        </Menu.Item>
                                    </Menu>} trigger={['click']}>
                                        <a className="ant-dropdown-link">
                                            操作 <EditOutlined type="down"/>
                                        </a>
                                    </Dropdown>
                                }
                            }]}
                        rowKey={(stu) => stu.sid}
                        dataSource={list}
                        pagination={{...pagination}}
                        loading={loading}
                        onChange={this.handleTableChange}/>
                </Card>
            </div>
        );
    }
}
